我如何重新排序bootstrap 3 div？

Question

我想使用Bootstrap 3在COL-LG和COL-MD配置上使用它

[A]圖片[B]一個帶有兩個按鈕的div [C]一個由javascript（id = item）制成的div

• [A] [C]
• [公元前]

並在COL-SM，COL-XS中具有此配置

• [一種]
• [B]
• [C]

在COL-SM上，可以根據需要設置COL-XS div，但是問題出在COL-LG和COL-MD上：我在瀏覽器中得到了

• [一種]
• [公元前]
• ..，。[C]

我嘗試過使[B]像這樣：

<div class="col-lg-6 col-md-6 col-lg-pull-6 col-md-pull-6>

但我得到這個結果：

[AB] [C]

[B]重疊[A]

<div class="container">

        <div id="img" class="col-md-6 col-lg-6">
           <img class="img-responsive" src="images/laforma.png" position:"relative">
        </div>

        <div class="col-md-7 col-lg-7">                
            <div class="btn-group-vertical">
            <button type="button" class="btn btn-default" onclick="Anticonceptivo1()">button1</button>
                <br>
            <button type="button" class="btn btn-default" onclick="Anticonceptivo2()">button2</button>
            </div>

            <script type="text/javascript">
                function Anticonceptivo1(){
                     document.getElementById('item').className = "col-lg-4 col-lg-push-1 col-md-4 col-md-push-1";
                     document.getElementById('item').innerHTML = '....';
                                          }
            </script>
            <script type="text/javascript">
                function Anticonceptivo2(){
                     document.getElementById('item').className = "col-lg-4 col-lg-push-1 col-md-4 col-md-push-1";`enter code here`
                     document.getElementById('item').innerHTML = '....';
                 }
            </script>
        </div>

        <div class="" id="item">
        </div> 
 </div>

Answer 1

據我了解，您需要兩個列嗎？ 其中一個包含圖片和下面的兩個按鈕，另一個包含腳本結果項的單元格

<div class="col-lg-6 col-md-6">

    <!-- img is here -->
    <img src="path_to_image">

    <!-- Buttons are here -->
    <button class="btn  btn-default">Button 1</button>
    <button class="btn  btn-default">Button 2</button>

</div>
<div class="col-lg-6 col-md-6" id="item">

     <!-- Script will add items here -->
     <!-- Butt add items without any Bootstrap classes -->

</div>

腳本很像

        <script type="text/javascript">
            function Anticonceptivo2(){
                 document.getElementById('item').innerHTML = '....';
             }
        </script>

如果我錯誤地理解你，請給我一些澄清。 也許想象你想要什么。

Answer 2

我認為是這樣的：

將所有div放在一個div（一個div包裝器）中，在包裝器內部，將A和B div和C包裝器放在A和B div旁邊。 “ Dmity S”為您編寫解決問題的代碼（僅將所有內容放入包裝器中）。