我在同一行中有两个标题，但我不知道如何布局页面以使其在移动设备上运行

Question

<div class="row rowItem">
<div class="labelTitle col-sm-3">
    <h2>Section Title</h2>
</div>

<div class="labelTitle col-sm-offset-6">
    <h2>Section Title</h2>
</div>

<div class="col-sm-3">
    <div class="image">
        <a href="#">
            <img class="img-responsive" src="http://placehold.it/367x245" title=""></a>
    </div> 
    <div class="text">
        <h4 class="font-bold">
            <a href="#">Title</a></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p> 
    </div> 
</div>
<div class="col-sm-3">
    <div class="image">
        <a href="#">
            <img class="img-responsive" src="http://placehold.it/367x245" title=""></a>
    </div> 
    <div class="text">
        <h4 class="font-bold">
            <a href="#">Title</a></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p> 
    </div> 
</div>

<div class="col-sm-3">
    <div class="image">
        <a href="#">
            <img class="img-responsive" src="http://placehold.it/367x245" title=""></a>
    </div> 
    <div class="text">
        <h4 class="font-bold">
            <a href="#">Title</a></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p> 
    </div> 
</div>

您可以在此处找到该示例 http://diegopalma.com/test/

最后一行有 3 列。第一列两列属于一个节标题，第三列有另一个节标题。

我

设法使用第二个标题的偏移类在桌面上正确显示它，但当然我的方法不适用于移动设备。

有什么想法或建议吗？

Answer 1

这是你要找的吗？

<div class="container">
<div class="row">
    <div class="col-xs-12 col-sm-6">
        <h2>Section Title</h2>
        <div class="row">
            <div class=" col-xs-12 col-sm-6">
                <div class="image">
                    <a href="#">
                        <img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
                    </a>
                </div>
            </div><!--/.col-->
            <div class="col-xs-12 col-sm-6">
                <div class="image">
                    <a href="#">
                        <img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
                    </a>
                </div>
            </div><!--/.col-->
        </div><!--/.row-->
    </div><!--/.col-->
    <div class="col-xs-12 col-sm-6">
        <h2>Section Title</h2>
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <div class="image">
                    <a href="#">
                        <img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
                    </a>
                </div>
            </div><!--/.col-->
            <div class="col-xs-12 col-sm-6">
                <div class="image">
                    <a href="#">
                        <img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
                    </a>
                </div>
            </div><!--/.col-->
        </div><!--/.row-->
    </div><!--/.col-->
</div><!--/.row-->

Answer 2

您需要创建一些自定义 css 来处理它或嵌套您的容器。

.HTML

<div class="row">
    <div class="col-md-6">
        <h2>Section Title</h2>
        <div class="row">
            <div class="col-sm-6">
                <div class="image">
                    <a href="#">
                        <img class="img-responsive" src="http://placehold.it/367x245" title="">
                    </a>
                </div>
                <div class="text">
                    <h4 class="font-bold">
                        <a href="#">Title</a>
                    </h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="image">
                    <a href="#">
                        <img class="img-responsive" src="http://placehold.it/367x245" title="">
                    </a>
                </div>
                <div class="text">
                    <h4 class="font-bold">
                        <a href="#">Title</a>
                    </h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <h2>Section Title</h2>
        <div class="row">
            <div class="col-sm-6">
                <div class="image">
                    <a href="#">
                        <img class="img-responsive" src="http://placehold.it/367x245" title="">
                    </a>
                </div>
                <div class="text">
                    <h4 class="font-bold">
                        <a href="#">Title</a>
                    </h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p>
                </div>
            </div>
        </div>
    </div>
</div>