为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

猛跑小猪 2020-02-02 15:00:22
这类似于这个问题在这里,但略有不同。我想在移动设备上重新排序三个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>
查看完整描述

1 回答

?
手掌心

TA贡献1942条经验 获得超3个赞

您必须为更大的宽度禁用flexbox,因为Bootstrap 4的flexbox会使列具有相同的高度。然后,使用浮子,这样B和C列自然会向右拉,因为A更高。flexbox order-将在移动设备上对cols重新排序...


ABC桌面,BAC移动


<div class="container-fluid">

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

         <div class="col-lg-6 order-1 float-left">

            A

        </div>

        <div class="col-lg-6 order-0 float-left">

            B

        </div>

        <div class="col-lg-6 order-1 float-left">

            C

        </div>

    </div>

</div>


查看完整回答
反对 回复 2020-02-02
  • 1 回答
  • 0 关注
  • 506 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信