Question

我正在用Bootstrap 4建立响应式战线，但我做不到我想做的。

我在Codepen上获得了想要的结果，但是我试图避免在台式机和移动设备上重复代码。

<p>On desktop</p>

<div class="container-fluid">
  <div class="row">
    <div class="col col-md-3">
      <div class="picture">PICTURE</div>
    </div>
    <div class="col col-md-9">
      <div class="row">
        <div class="col col-md-8 ">
          <div class="content-a">ContentA</div>
        </div>
        <div class="col col-md-4">
          <div class="button">Button</div>
        </div>
      </div>
      <div class="row">
        <div class="col col-md-12">
          <div class="content-b">Content B</div>
        </div>
      </div>
    </div>
  </div>
</div>

<p>On mobile</p>

<div class="container-fluid">
  <div class="row">
    <div class="col col-md-6">
      <div class="picture">PICTURE</div>
    </div>
    <div class="col col-md-6">
      <div class="content-a">Contant A</div>
    </div>
    <div class="col col-md-12">
      <div class="content-b">Contant B</div>
    </div>
    <div class="col col-md-12">
      <div class="button">Button</div>
    </div>

  </div>
</div>

https://codepen.io/sanchou/pen/YzyXaQW

这有可能吗？我该如何实现？

Answer 1

您可以考虑使用flexbox实现布局： Bootstrap Flex

您可以使用order class更改“内容B”和“按钮”的顺序。

请记住，某些较旧的浏览器可能不支持它。

响应式布局。台式机和移动设备使用相同的HTML

1 个答案: