Twitter bootstrap Css线性渐变50%左右上下移动问题

我的基本要求是做一个2栏，50%红色，左边50%白色，右边有文字，右边有图像。它与我的解决方案在大屏幕到常规屏幕上的效果非常好。使用bootstrap4，自然2列将从上到下从一侧移动到另一侧。因为我使用“线性渐变”来制作背景色，所以我做了一个快速的媒体查询，并将颜色设置为顶部和底部

问题是，我总是要处理/写不同的媒体查询，一个屏幕大小总是像这样断开

我编写了多种媒体查询和调整图像列的颜色百分比和最大高度。看起来我基本上做错了什么。有更好的引导解决方案吗？还是一种更好的css方式，可以在所有屏幕上工作

.应用程序标题{ 背景：左侧线性梯度，fff 50%，d4272e 50%； } @媒体屏幕和最大宽度：992px{ .应用程序标题{ 背景：底部线性梯度，d4272e 52.2%，fff 50%； } .app headline.左侧文本内容{ 背景：d4272e； } .app headline.img内容对吗{ 背景：fff； 最大高度：24雷姆； } } @媒体屏幕和最大宽度：768px{ .应用程序标题{ 背景：底部线性梯度，d4272e 59.9%，fff 50%； } .app headline.img内容对吗{ 背景：fff； 最大高度：17雷姆； } } @介质最小宽度：768px和最大宽度：768px{} 产品滑块 测验 H2应用程序标题在这里

劳动和就业的时间变化 夸埃拉特·沃鲁帕特姆。我们在维尼亚姆和拉博里奥萨姆， nisi ut非流动性商品交易前的非流动性商品交易 劳工和多洛尔·马格纳姆

特点/优点 工作和工作时间的变化 阿马格南·阿利夸姆·奎拉特·沃卢帕特姆 这是一个非常小的节日 获取应用程序 H2应用程序标题在这里

劳动和就业的时间变化 夸埃拉特·沃鲁帕特姆。我们在维尼亚姆和拉博里奥萨姆， nisi ut非流动性商品交易前的非流动性商品交易 劳工和多洛尔·马格纳姆

特点/优点 工作和工作时间的变化 阿马格南·阿利夸姆·奎拉特·沃卢帕特姆 这是一个非常小的节日 获取应用程序

---

-> 您需要从媒体查询中删除以下内容，您可以尝试使用伪元素进行着色，以创建溢出并隐藏白色部分：

.app-headline .text-content-left {
     background: #d4272e;
}

完整代码：

.应用程序标题{ 背景：左侧线性梯度，fff 50%，d4272e 50%； 溢出：隐藏； } @媒体屏幕和最大宽度：992px{ .应用程序标题{ 背景：底部线性梯度，d4272e 52.2%，fff 50%； } .app headline.左侧文本内容{ 位置：相对位置； z指数：0； } .app headline.text内容左：：前{ 内容：； 位置：绝对位置； 排名：0； 左：-50vw； 右图：-50vw； 底部：0； z指数：-1； 背景：d4272e； } .app headline.img内容对吗{ 背景：fff； 最大高度：24雷姆； } } @媒体屏幕和最大宽度：768px{ .应用程序标题{ 背景：底部线性梯度，d4272e 59.9%，fff 50%； } .app headline.img内容对吗{ 背景：fff； 最大高度：17雷姆； } } @介质最小宽度：768px和最大宽度：768px{} 产品滑块 测验 H2应用程序标题在这里

劳动和就业的时间变化 夸埃拉特·沃鲁帕特姆。我们在维尼亚姆和拉博里奥萨姆， nisi ut非流动性商品交易前的非流动性商品交易 劳工和多洛尔·马格纳姆

特点/优点 工作和工作时间的变化 阿马格南·阿利夸姆·奎拉特·沃卢帕特姆 这是一个非常小的节日 获取应用程序 H2应用程序标题在这里

劳动和就业的时间变化 夸埃拉特·沃鲁帕特姆。我们在维尼亚姆和拉博里奥萨姆， nisi ut非流动性商品交易前的非流动性商品交易 劳工和多洛尔·马格纳姆

特点/优点 工作和工作时间的变化 阿马格南·阿利夸姆·奎拉特·沃卢帕特姆 这是一个非常小的节日 获取应用程序 -> 请按此办理:-

这里48是您的上边距，26是左侧区域的底部填充。用刷新检查它

var height=jQuery.app-headline.text-content-left.height； var实际高度=高度+48+26+‘px’； jQuery.app headline.cssbackground，底部线性梯度，d4272e+实际高度。toString+，fff 50%； .应用程序标题{ 背景：左侧线性梯度，fff 50%，d4272e 50%； } @媒体屏幕和最大宽度：992px{ .应用程序标题{ 背景：底部线性梯度，d4272e 52.2%，fff 50%； } .app headline.左侧文本内容{ 背景：d4272e； } .app headline.img内容对吗{ 背景：fff； 最大高度：24雷姆； } } @媒体屏幕和最大宽度：768px{ .应用程序标题{ 背景：底部线性梯度，d4272e 59.9%，fff 50%； } .app headline.img内容对吗{ 背景：fff； 最大高度：17雷姆； } } @介质最小宽度：768px和最大宽度：768px{} 产品滑块 测验 H2应用程序标题在这里

劳动和就业的时间变化 夸埃拉特·沃鲁帕特姆。我们在维尼亚姆和拉博里奥萨姆， nisi ut非流动性商品交易前的非流动性商品交易 劳工和多洛尔·马格纳姆

特点/优点 工作和工作时间的变化 阿马格南·阿利夸姆·奎拉特·沃卢帕特姆 这是一个非常小的节日 获取应用程序

---

我更新了我的答案非常感谢，我看到的唯一问题是，如果在这一部分下面有内容，图片就会在手机上的部分上/下