Div响应文本

时间:2018-04-23 11:36:15

标签: html css twitter-bootstrap

我有这两个div,我想让他们响应,他们是响应现在我想要的唯一的事情是改变发生的顺序,如div id = 1默认是在所有设备中的第一,但在这里我想要div id = 2在平板电脑和移动设备中排在第一位,在桌面上我想要的是现在的相同顺序。即id = 1 first和id = 2秒,并且在小设备中id = 2 in first,id = 1 in second place。有什么想法吗?

<div class="container main-padding">
    <div class="row">
        <div class="col-lg-8" id="1">
            <div class="page-body-title">MISSIONS DE L'IGF</div>

            <br>
            <p>L'IGF a pour missions:</p>

            <br>


            <div class="page-body-title"> ATTRIBUTIONS DE L'IGF</div>

            <br>
            <p>
                Les attributions générales de l'IGF sont les suivantes:
            </p>
        </div>
        <div class="col-lg-4 " id="2">

            <br>
            <br>
            <div class="col-lg-10 col-lg-offset-2">
                <p class="inside-page-right">ACCUEIL  &#62; <i class="active">A PROPOS</i></p>
                <br>
                <div class="col-lg-12 inside-page-bbox">
                    <div class="bbox">
                        <span><a href="mission_et_attributions">&#43; &nbsp;&nbsp;Mission et Attributions </a></span><br>
                        <span><a href="organisation">&#43; &nbsp;&nbsp;Organisation </a></span><br>
                        <span><a href="perimetre_d_intervention">&#43; &nbsp;&nbsp;Perimètre d'intervention </a></span><br>
                        <span><a href="type_d_intervention">&#43; &nbsp;&nbsp;Type d'intervention </a></span>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我也试过左右浮动,但是我们没有正常工作。

1 个答案:

答案 0 :(得分:0)

看一下Bootstrap的Grid Column Ordering。我给出了一个可能适合你的例子,下面。

<div class="container main-padding">
    <div class="row">
        <div class="col-lg-4 col-lg-pull-8" id="2">

            <br>
            <br>
            <div class="col-lg-10 col-lg-offset-2">
                <p class="inside-page-right">ACCUEIL  &#62; <i class="active">A PROPOS</i></p>
                <br>
                <div class="col-lg-12 inside-page-bbox">
                    <div class="bbox">
                        <span><a href="mission_et_attributions">&#43; &nbsp;&nbsp;Mission et Attributions </a></span><br>
                        <span><a href="organisation">&#43; &nbsp;&nbsp;Organisation </a></span><br>
                        <span><a href="perimetre_d_intervention">&#43; &nbsp;&nbsp;Perimètre d'intervention </a></span><br>
                        <span><a href="type_d_intervention">&#43; &nbsp;&nbsp;Type d'intervention </a></span>

                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-8 col-lg-push-4" id="1">
            <div class="page-body-title">MISSIONS DE L'IGF</div>

            <br>
            <p>L'IGF a pour missions:</p>

            <br>


            <div class="page-body-title"> ATTRIBUTIONS DE L'IGF</div>

            <br>
            <p>
                Les attributions générales de l'IGF sont les suivantes:
            </p>
        </div>
    </div>
</div>