Bootstrap 3 merge rows and columns

html css twitter-bootstrap-3

14,263

With some nesting and pull-right on the appropriate columns you can reverse the float:left and make it work (albeit a hack!)...

http://www.codeply.com/go/rgHEL6DW12

<div class="container">
    <div class="row">
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-4 three-div">works</div>
                <div class="col-sm-8">works</div>
                <div class="col-sm-4 three-div pull-right">works</div>
                <div class="col-sm-4 two-div pull-right">works</div>
                <div class="col-sm-8 pull-right">
                    ;-)
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="row">
                <div class="col-sm-12 two-div">works</div>
                <div class="col-sm-12 two-div">works</div>
            </div>
        </div>
    </div>
</div>

Think about it like this...

http://www.codeply.com/go/rgHEL6DW12

14,263

Author by

YoloAcc

Updated on July 26, 2022

Comments

YoloAcc almost 2 years

I can't figure out what is the problem with my code. I'm very new in bootstrap my problem is kinda trivial. One of my field is out of position. I have tried a different route by making only one row and instead of increasing the div sizes I reduced them, but it had the exact same problem. (Run the code in full screen mode).

Please if you can help me out!

.row {
    background-color: yellow;
}

.col-sm-3, .col-sm-6 {
    border:solid 2px black;
}

div {
    height:200px;
}
.two-div {
    height:400px;
}
.three-div {
    height:600px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-sm-3 three-div pull-left">Works</div>
            <div class="col-sm-6">Works</div>
            <div class="col-sm-3 two-div pull-right">Works</div>
        </div>
        <div class="row">
            <div class="col-sm-3 two-div">Works</div>
            <div class="col-sm-3 three-div">Works</div>
        </div>
        <div class="row">
            <div class="col-sm-3 two-div pull-right">Works</div>
        </div>
        <div class="row">
            <div class="col-sm-6">:(</div>
        </div>
    </div>
    </body>
</html>