Question

我已经创建了一个我在这里遇到的问题的快速演示：http://www.bootply.com/Nb2PUnwINT

小屏幕及以下的行为在这里是完美的，但在中型/大型屏幕上，黄色列我希望与绿色列相邻。

这可能吗？希望我在这里提供了足够的细节。

Answer 1

请查看以下代码

<div class="row">
    <div class="col-sm-12 col-md-9 col-lg-9">
        <div class="row">

           <div class="col-sm-12 col-md-12 col-lg-12" style="background-color:green">
                Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque porta felis a ex egestas ultrices. Duis vel lorem nulla. Vestibulum eget risus nec felis hendrerit aliquet. Sed et tempus tellus. Curabitur congue magna lacus, facilisis rhoncus neque finibus hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                Nunc sed viverra nunc. Ut venenatis dapibus odio vel viverra. Nullam sem justo, scelerisque et fringilla quis, ullamcorper id diam. Suspendisse vitae justo porta, molestie diam vitae, pulvinar nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ut felis lacus. Etiam quis pretium dolor. Nulla eu rutrum erat. Ut hendrerit et diam ac eleifend. Suspendisse mollis elit lorem, ultrices fermentum erat convallis mattis. Duis congue mattis magna non elementum. Ut ultricies vitae ante sit amet tempor.
           </div>
        </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-3">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12" style="background-color:red">
                Lorem ipsum dolor sit a
           </div>
        </div>
        <div class="row">

           <div class="col-sm-12 col-md-12 col-lg-12" style="background-color:yellow">
                met, consectetur adipiscing elit. Vestibulum eget odio ut lectus dignissim varius. Praesent volutpat, dui quis ultricies pellentesque, sem ipsum volutpat libero, in fermentum leo nisl a orci. Praesent gravida elit ac felis interdum, at elementum lacus tristique. Curabitur dignissim metus tristique vehicula iaculis. Quisque mattis tincidunt tellus, et aliquet arcu aliquet ut. Vestibulum vel metus nec ipsum sagittis aliquet in sit amet erat. Praesent pellentesque sit amet massa sed lobortis. Proin blandit consectetur egestas. Nulla cursus tortor turpis, nec tempor metus viverra et. Quisque id auctor arcu, ac posuere eros. Curabitur ac tincidunt purus. Integer scelerisque quis ex vitae volutpat. Donec non pretium turpis.
                Duis dolor felis, convallis non venenatis ut, vulputate in ipsum. Etiam nisi tortor, finibus sit amet tellus non, bibendum sollicitudin enim. Proin in mollis neque, id faucibus felis. Proin cursus tristique mollis. Proin eget aliquam orci. Suspendisse egestas consequat magna quis ornare. Duis maximus dui sit amet neque fermentum aliquam.
           </div>
        </div>
    </div>
 </div>

Bootstrap 3 - 为移动设备重新排序2列布局（内容未垂直对齐）

1 个答案: