Push right div bootstrap on top in stead of on the bottom

Reply

grafic.web

Member

300 Points

1601 Posts

Push right div bootstrap on top in stead of on the bottom

Jun 14, 2017 08:57 AM|grafic.web|LINK

Hi,

i have to div one on the left and one on the right and i would love, when the screen is resized smaller to pushe the right one on top and not on the bottom as it is now..

This is the code :

<div class="row">
    <div class="col-md-9 col-sm-8">
     LEFT DIV
    </div>
    <div class="col-md-3 col-sm-4">
      RIGHT DIV  
    </div>
</div>

Now the right div when i resize it goes on the bottom, but i woul love this to be on top!!

How to do?

Thanks

Your wish is your command!!!

Reply

kaushalparik...

All-Star

31332 Points

7049 Posts

Re: Push right div bootstrap on top in stead of on the bottom

Jun 14, 2017 09:35 AM|kaushalparik27|LINK

I feel as not a good solution, but it works with jQuery handling in resize event:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        var done = false;
        $(window).resize(function () {
            var responsive_viewport = $(window).width();
            console.log(responsive_viewport);
            if (!done && responsive_viewport < 766) {
                done = true;
                var right_div = $('.questionDiv2').clone();
                $('.questionDiv2').remove();
                $(".questionDiv1").before(right_div);
            }
            else if (responsive_viewport > 766) {
                done = false;
                var right_div = $('.questionDiv2').clone();
                $('.questionDiv2').remove();
                $(".questionDiv1").after(right_div);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div class="row">
                <div class="col-md-9 col-sm-8 questionDiv1">
                    LEFT DIV
                </div>
                <div class="col-md-3 col-sm-4 questionDiv2">
                    RIGHT DIV
                </div>
            </div>
        </div>
    </form>
</body>
</html>

नमस्ते,
[KaushaL] Blog Twitter [MS MVP 2008 & 2009] [MCC 2011] [MVP Reconnect 2017]
Don't forget to click "Mark as Answer" on the post that helped you

Reply

Cathy Zou

Star

8560 Points

2883 Posts

Re: Push right div bootstrap on top in stead of on the bottom

Jun 15, 2017 07:20 AM|Cathy Zou|LINK

Hi grafic.web

Use column ordering to complete this.

Working example as below:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <div class="container">
            <div class="row">
                <div class="col-md-9 col-sm-8 " style="background-color: bisque">
                    LEFT DIV
                </div>
                <div class="col-md-3 col-sm-4 " style="background-color: cadetblue">
                    RIGHT DIV  
                </div>
            </div>

        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-md-push-9  col-sm-4   col-sm-push-8" style="background-color: cadetblue">RIGHT DIV</div>
                <div class="col-md-9 col-md-pull-3  col-sm-8  col-sm-pull-4" style="background-color: bisque">LEFT DIV</div>
            </div>
        </div>

Output screenshot as below:

Best regard

Cathy

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Push right div bootstrap on top in stead of on the bottom [Answered]RSS

2 replies

Shortcuts

Push right div bootstrap on top in stead of on the bottom

Re: Push right div bootstrap on top in stead of on the bottom

Re: Push right div bootstrap on top in stead of on the bottom