靴带中的锯齿形布局

Question

我正在做一个网页，并试图响应像这张图片一样的布局

​

​

我正在使用最新的引导程序，我的代码是

<div class="col-sm-3 col-md-3">
        <img src="<?php echo base_url();?>assets/img/management-team/female.png" alt="" class="omt_img" />
        <div class="clr"></div>
        <h3 class="omt_title">Managing Director</h3>
    </div>
    <div class="col-sm-9 col-md-9">
        <h2 class="omt_name">Miss B Ayub</h2>
        <h4 class="omt_edu">PhD Psychology</h4>
        <hr>
        <p class="omt_para">Being a student of human behaviour, I observed that technology has greatly influenced our lives especially in the field of education. Students now a days are more engaged through technology based learning than traditional. This observation especially through my research inspired me to come up with OTI. This unique project is the solution to the problems faced by students of this day and age. Students want cutting edge technology with a tutor who is a facilitator and a mentor. This is exactly what OTI provides, online tutoring from the comfort of your own home and with the tutor of your choice.</p>
    </div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div class="col-xs-9 col-sm-9 col-md-9">
        <h2 class="omt_name">Miss B Ayub</h2>
        <h4 class="omt_edu">PhD Psychology</h4>
        <hr>
        <p class="omt_para">Being a student of human behaviour, I observed that technology has greatly influenced our lives especially in the field of education. Students now a days are more engaged through technology based learning than traditional. This observation especially through my research inspired me to come up with OTI. This unique project is the solution to the problems faced by students of this day and age. Students want cutting edge technology with a tutor who is a facilitator and a mentor. This is exactly what OTI provides, online tutoring from the comfort of your own home and with the tutor of your choice.</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="<?php echo base_url();?>assets/img/management-team/male.jpg" alt="" class="omt_img" />
        <h3 class="omt_title">Managing Director</h3>
    </div>

对于平板电脑屏幕，代码运行良好，但是当我移动到移动设备时，布局没有显示perfect...and，我得到的布局如下

1. 图片
2. 指定
3. 名字
4. 教育
5. 简介
6. 名字
7. 教育
8. 简介
9. 图片
10. 指定

但我想展示这样的模式

1. 图片
2. 指定
3. 名字
4. 教育
5. 简介
6. 图片
7. 指定
8. 名字
9. 教育
10. 简介

是否可以使用纯css来使用引导？

Answer 1

列排序

轻松更改引导CSS的顺序，您可以使用.col-md-push-*和.col-md-pull-*。

    <div class="col-sm-3 col-md-3">
    <img src="<?php echo base_url();?>assets/img/management-team/female.png" alt="" class="omt_img" />
    <div class="clr"></div>
    <h3 class="omt_title">Managing Director</h3>
</div>
<div class="col-sm-9 col-md-9">
    <h2 class="omt_name">Miss B Ayub</h2>
    <h4 class="omt_edu">PhD Psychology</h4>
    <hr>
    <p class="omt_para">Being a student of human behaviour, I observed that technology has greatly influenced our lives especially in the field of education. Students now a days are more engaged through technology based learning than traditional. This observation especially through my research inspired me to come up with OTI. This unique project is the solution to the problems faced by students of this day and age. Students want cutting edge technology with a tutor who is a facilitator and a mentor. This is exactly what OTI provides, online tutoring from the comfort of your own home and with the tutor of your choice.</p>
</div>

<div class="col-sm-3 col-md-3 col-md-push-9">
    <img src="<?php echo base_url();?>assets/img/management-team/male.jpg" alt="" class="omt_img" />
    <h3 class="omt_title">Managing Director</h3>
</div>
<div class="col-sm-9 col-md-9 col-md-pull-3 ">
    <h2 class="omt_name">Miss B Ayub</h2>
    <h4 class="omt_edu">PhD Psychology</h4>
    <hr>
    <p class="omt_para">Being a student of human behaviour, I observed that technology has greatly influenced our lives especially in the field of education. Students now a days are more engaged through technology based learning than traditional. This observation especially through my research inspired me to come up with OTI. This unique project is the solution to the problems faced by students of this day and age. Students want cutting edge technology with a tutor who is a facilitator and a mentor. This is exactly what OTI provides, online tutoring from the comfort of your own home and with the tutor of your choice.</p>
</div>