Search code examples
twitter-bootstrap-3position

Positioning Columns Bootstrap

I'm using bootstrap. I need to move the columns as in the attached image.

enter image description here

Solution 
  •     @{
        Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>EE</title>
        <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-1.9.1.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="row">
            <div class="col-md-3  col-sm-6 col-md-push-3">
                <div class="alert alert-info" style="width:10px">2</div>
            </div>
            <div class="col-md-3 col-sm-6 col-md-push-6">
                <div class="alert alert-info " style="width:10px">4</div>
            </div>
            <div class="col-md-3 col-sm-6 ">
                <div class="alert alert-info " style=" width:10px">3</div>
            </div>
            <div class="col-md-3  col-sm-6 col-md-pull-8">
                <div class="alert alert-info" style="width:10px">1</div>
            </div>
        </div>
    </body>
    </html>