使用Bootstrap 3.3.7将嵌入式div推到其祖父母下

时间:2018-09-19 20:49:07

标签: jquery twitter-bootstrap-3

我们有一个Bootstrap页面,其中有一个祖父母div,其中包含一个左和右div。在右div内是左对和右div的另一对。在移动设备上查看时,我们需要提到的最后一个div推到其祖父母下。以下是一些已开始的代码:

https://codepen.io/Codewalker/pen/aaPRrz

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">

<div class="container" style="background:#ddd">
<div class="num-container">
    <div class="num-thumb">
        <img src="https://dummyimage.com/71x389/000000/fff&text=Side" class="img-responsive imgNum">
    </div>
    <div class="num-content" style="background:#ddd">
        <h2 class="num-title">Grandparent goes right here</h2>
        <p>This along with that image off to the left is the grandparent div. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. </p>
        <div class="row">
            <div class="col-sm-5">
                <h5>Content col-sm-5</h5>
                <p>Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. </p>
            </div>
            <div class="col-sm-7" style="background:orange">
                <div class="vid-container">
                    <div class="vid-thumb">
                        <img src="https://dummyimage.com/17x158/000000/fff" />
                    </div>
                    <div class="vid-content">
                      <h5>Content col-sm-7</h5>
                      <p>For mobile devices, this needs to wrap underneath the entire gray div. For mobile devices, this needs to wrap underneath the entire gray div.For mobile devices, this needs to wrap underneath the entire gray div.For mobile devices, this needs to wrap underneath the entire gray div.For mobile devices, this needs to wrap underneath the entire gray div. </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

0 个答案:

没有答案