时间戳

首页 > 解决方案 > 响应式布局。相同的 html 用于桌面 + 移动

html - 响应式布局。相同的 html 用于桌面 + 移动

问题描述

我正在使用 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

这有可能做到吗？我怎么能做到这一点？

标签： htmlcssbootstrap-4

解决方案

你可以考虑使用 flexbox 来实现你的布局： Bootstrap Flex

您可以使用order class更改“Content B”和“Button”的顺序。

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

推荐阅读