如何将flex列放在另一个下面？

Question

在手机上查看时，我需要将一列放在另一列之下。 我正在使用bootstrap 4并且div是flex，我使用flex列和flex行，已经使用了属性属性顺序而且它不起作用。

我的代码

<div id="menu-text" class="d-flex flex-row">

        <div class="d-flex flex-column col-sm justify-content-center">
          <div class="d-flex flex-row menu-subtitle">Sashomi  </div>
          <div class="d-flex flex-row menu-small-text">[CORTE DE MARISCOS O CARNE CRUDOS]</div>
          <div class="d-flex flex-row menu-mini-text">[FRESH BEEF OR NATURAL SEAFOOD]</div>
          <img src="images/BrochazoBlanco.png" class="white-brush">

          <div class="d-flex flex-row">

            <div class="d-flex flex-column col-md-3">
              <div class="d-flex flex-row">$ 72</div>
            </div>

            <div class="d-flex flex-column col-md-3">
              <div class="d-flex flex-row">$ 50</div>
            </div>

            <div class="d-flex flex-column col-md-6">
              <div class="d-flex flex-row">Sushi california</div>
            </div>
          </div>
        </div>

        <div class="d-flex flex-column col-sm justify-content-center">
          <div class="d-flex flex-row menu-subtitle">Sashimi</div>
          <div class="d-flex flex-row menu-small-text">[CORTE DE MARISCOS O CARNE CRUDOS]</div>
          <div class="d-flex flex-row menu-mini-text">[FRESH BEEF OR NATURAL SEAFOOD]</div>
          <img src="images/BrochazoBlanco.png" class="white-brush">

          <div class="d-flex flex-row">

            <div class="d-flex flex-column col-md-3">
              <div class="d-flex flex-row">$ 72</div>
            </div>

            <div class="d-flex flex-column col-md-3">
              <div class="d-flex flex-row">$ 50</div>
            </div>

            <div class="d-flex flex-column col-md-6">
              <div class="d-flex flex-row">Sushi california</div>
            </div>
          </div>
        </div>

    </div>

Answer 1

检查this example以获取您提供的代码的简化响应版本。

我不知道您需要多少列，因为您没有提供任何代码，但这里有一个响应的三列网格。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm bg-secondary">
      One of three columns
    </div>
    <div class="col-sm bg-danger">
      One of three columns
    </div>
    <div class="col-sm bg-success">
      One of three columns
    </div>
  </div>
</div>

您可以看到相同的内容here，并调整输出大小以查看其工作原理。