html - Bootstrap 列重新排序和 2 列跨越。我的布局可能吗？

Question

我正在使用 Bootstrap 并尝试在桌面和移动设备中创建以下布局。基本上整个页面有 3 列，最右边的列类似于动态长度的侧边栏。方框 A 和 B 用于重要信息，而方框 D 用于页面的“主要内容”，即其他所有内容。

桌面 View

|......一个.......| |....B....| |....C....|

|............D ...............| |....C....|

|............D ...............| |....C....|

|............D ...............| |....C....|

|............D................|

移动 View

|........A.......|

|.......B.......|

|........C.......|

|........D.......|

在移动 View 中，我希望框按顺序显示，A、B、C 和 D。

在桌面 View 中，我希望 D 从 A 和 B 的正下方开始，跨越它们的宽度。使用标准 Bootstrap ，我不能将 A、B 和 C 放在同一行，因为 D 直到 C 结束后才会开始。我也不能将 A、B 和 D 嵌套在一列中，因为这样在移动设备中它会输出A、B、D、C。

我查看了 Bootstrap 列的重新排序，但我看不出这对我的情况有何影响。也许我错过了一些明显的东西。任何帮助感激不尽!

Answer 1

最重要的部分是@media query 和 float: right。请注意，媒体查询在“运行代码片段”框内不起作用，但它会在外部正常工作。

.block-a {
	background: red;
	height: 50px;
}

.block-b {
	background: green;
	height: 50px;
}

.block-c {
	background: yellow;
	height: 150px;
}

@media (min-width: 768px) {
	.block-c {
		float: right;
	}
}

.block-d {
	background: pink;
    height: 200px;
}
	

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	<div class="row">
		<div class="col-sm-6 block-a">A</div>
		<div class="col-sm-3 block-b">B</div>
		<div class="col-sm-3 block-c">C</div>
		<div class="col-sm-9 block-d">D</div>
	</div>
</div>