行内具有可变高度列内容的引导布局，并将它们正确包装在不同的屏幕上

Question

需要根据屏幕大小使用 bootstrap4 正确定位块。在大屏幕中，所有的都应该排成一行，但是当屏幕尺寸减小到中等时，最右边的块应该在第一个块的下方。我尝试使用 d-none 类并且它有效。但是，需要重复代码。所以，只是想确定一下，这样做是否合适。谢谢！

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters">
  <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: red; height: 60px">
    <p>Bread Crump</p>
    <p>Bread Crump</p>
	<div class="d-none d-md-block d-lg-none mt-2" style="background-color: pink; height: 100px">
		<p>List</p>
		<p>List</p>
		<p>List</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: green; height: 150px">
    <p>Name</p>
    <p>Name</p>
    <p>Name</p>
    <p>Name</p>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4 d-md-none d-lg-block" style="background-color: pink; height: 100px">
    <p>List</p>
    <p>List</p>
    <p>List</p>
  </div>
</div>

Answer 1

在 Bootstrap 4 中执行此操作的正确方法是使用 order 类在不同的断点重新排序列，如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="row no-gutters">
    <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: red;">
        <p>Bread Crump</p>
        <p>Bread Crump</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: green; height: 150px">
        <p>Name</p>
        <p>Name</p>
        <p>Name</p>
        <p>Name</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 order-md-2 order-lg-3" style="background-color: pink; height: 100px">
        <p>List</p>
        <p>List</p>
        <p>List</p>
    </div>
</div>

order-md-2 类说：您将 2 放置在中等 (md) 屏幕及以上（以及以下）上。

order-lg-3 类说：你将 3 放置在大 (lg) 屏幕及以上。

哦，当然，如果你重新排列 HTML，你可以只使用一个 order 类而不是像这样的两个：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row no-gutters">
    <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: red;">
        <p>Bread Crump</p>
        <p>Bread Crump</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 order-md-3" style="background-color: pink; height: 100px">
        <p>List</p>
        <p>List</p>
        <p>List</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: green; height: 150px">
        <p>Name</p>
        <p>Name</p>
        <p>Name</p>
        <p>Name</p>
    </div>
</div>

第二个代码sn-p中的order-md-3类告诉第二列：

“你通常在这里是第二名，但从中间 (md) 断点开始你将是第三名！”

当然，我可以以同样的方式处理第一个代码 sn-p 中的第二列（使用 order-md-3 类）。这些只是不同的选择。

最后，您还可以使用第二列的order-md-last 类来告诉它从中间断点开始到最后。