如何重新排序引导响应布局

Question

如何完成以下布局，以便在移动设备尺寸的屏幕（xs列）上有以下内容：

但是在非xs列上我们有：

请注意，在非xs大小的情况下，必须将块＃3上拉到块＃1的正下方（这意味着它可能不能与块＃4共享同一行）。鉴于上述限制，这里我能得到的最接近：

<div class="container">
<div class="row">
    <div class="col-sm-9" style="background-color:yellow;">
      Block #2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="col-sm-3" style="background-color:pink;">
      Block #1 - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </div>
    <div class="col-sm-9" style="background-color:yellow;">
      Block #4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="col-sm-3" style="background-color:pink;">
      Block #3 - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </div>
  </div>
</div>

Answer 1

您提供的示例违反了flex所针对的单维网格的性质。如果您希望创建一个接受响应式二维布局的模板，我建议您使用css grid。

如果您想接近您的示例，可以将弹性顺序设置为反转https://getbootstrap.com/docs/4.0/utilities/flex/#direction。

然后，您可以为每个媒体查询添加类：

<div class="container">
    <div class="row flex-row-reverse">
        <div class="col-xs-12 col-sm-3">1</div>
        <div class="col-xs-12 col-sm-9">2</div>
        <div class="col-xs-12 col-sm-3">3</div>
        <div class="col-xs-12 col-sm-9">4</div>
    </div>
</div>

通过调整浏览器大小来试试：

• Bootstrap v3 - https://codepen.io/doppl3r/pen/ppBXEe?editors=1100
• Bootstrap v4 - https://codepen.io/doppl3r/pen/vpMwrz?editors=1100

Answer 2

好吧，你可以用jQuery提供两个不同的网页！

// on page load, determine h/w ratio to determine whether mobile device
// or not and redirect accordingly
$(document).ready(function() {
  let h = window.screen.height;
  let w = window.screen.width;
  // for mobile resolutions
  if ((h/w) > 1.0) {
    window.location.replace("www.example1.com");
  } 
  // for non-mobile resolutions
  else {
    window.location.replace("www.example2.com");
  }
});