台式机上两个较短的div旁边有一个高div，并通过Bootstrap 4堆叠在移动设备上

Question

这类似于这个问题在这里，但略有不同。

我想在移动设备上重新排序三个div，并将它们并排放置在台式机上。请参阅所附图片以获得所需结果：

我在描述此过程时遇到了很多麻烦，希望图片对您有所帮助！

编辑：这是通过复制代码工作的代码片段：

const Main = () => (

<section className="" id="section-2">

      <div className="container">

        <div className="row">

          <div className="col-12 d-md-none">

            <div className="text-center">

              <span className="text-uppercase small-text small-text--lighter">step 2</span>

            </div>

            <div className="text-center">

              <h2 className="text-center">HEADER 2</h2>

            </div>

          </div>

          <div className="col-12 col-md-6">

            <img alt="tbd" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png" />

          </div>

          <div className="col-12 col-md-5 offset-md-1 text-center text-md-left">

            <div className="d-flex flex-column justify-content-between align-items-center align-items-md-start">

              <div className="d-none d-md-block">

                <span className="text-uppercase small-text small-text--lighter">step 2</span>

              </div>

              <div className="d-none d-md-block">

                <h2 className="">HEADER 2</h2>

              </div>

              <div>

                <p>SOME PARAGRAPH TEXT</p>

              </div>

            </div>

          </div>

        </div>

      </div>

    </section>

)

ReactDOM.render(

  <Main />,

  document.getElementById("react")

);

img {

  height: auto;

  width: 100%;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

您必须为更大的宽度禁用flexbox，因为Bootstrap 4的flexbox会使列具有相同的高度。然后，使用浮子，这样B和C列自然会向右拉，因为A更高。flexbox order-将在移动设备上对cols重新排序...ABC桌面，BAC移动<div class="container-fluid">&nbsp; &nbsp; <div class="row d-flex d-lg-block">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="col-lg-6 order-1 float-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; A&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-lg-6 order-0 float-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; B&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-lg-6 order-1 float-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; C&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>