CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Nico Monta
Nico Monta

Reputation: 1

how can i reorder bootstrap 3 div?

I want with bootstrap 3 to have this on COL-LG and COL-MD configuration

[A] image [B] a div with two buttons [C] a div made from javascript (id=item)

and having in COL-SM, COL-XS this configuration

on COL-SM, COL-XS divs are set as i want but the problem comes on COL-LG and COL-MD: I get this in the browser

I have tried with having the [B] like this:

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

but i get this result:

[AB][C]

[B] overlapping [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>

Upvotes: 0

Views: 146

Answers (2)

ArCiGo
ArCiGo

Reputation: 198

I think in this:

Put your all your div in one div (a div wrapper) and inside of the wrapper put your A and B div and the C wrapper beside of the A and B div. "Dmity S" write you the code for solve your problem (only put all in the wrapper).

Upvotes: 0

Dmitry Shurshilin
Dmitry Shurshilin

Reputation: 766

As I understand you need two cols? One of them contains picture and two buttons under, other cell for script result items

<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 is smth like

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

If I understand you falsely, give me, please, some clarification. Maybe picture what you want.

Upvotes: 1

Related Questions