Twitter Bootstrap Question posted in

Rearranging rows between medium/small devices in Bootstrap-Twitter bootstrap

I am trying to achieve the below layout

Medium Device
+----------+---------------------+
|  Image   | WordA WordA WordA   |
|          +---------------------+
|          | Links Links Links   |
|          +---------------------+
|          | WordB WordB WordB   |
+----------+---------------------+

Based on the above layout, How do I push the “Links/WordB” regions in the
Small Device to start from a new line, Or alternatively, push the Links/WordB right to the Image and below the WordA for medium device.

Small Device
+------------+---------------+
|  Image     | WordA WordA   |
|            | WordA         |
+----------------------------+
| Links  Links Links         |
+----------------------------+
| WordB WordB WordB          |
+----------------------------+

My MediumDevice example looks as below

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="Pragma" content="no-cache">
    <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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

    <style>
        div
        {
            border:solid 1px;
        }
        .big-box
        {
            background-color: #10BCFF;
            color: white;
            text-align: center;
            margin: 2px;
            font-size: 1.5em;
            height: 100px;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="big-box">image</div>
            </div>
            <div class="col-md-8">
                <div class="row">
                    WordA WordA WordA
                </div>
                <div class="row">
                    Links Links Links
                </div>
                <div class="row">
                    WordB WordB WordB
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Thanks for the help
Santos

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Managed to solve as below

    <style>
    .big-box {
        background-color: #10BCFF;
        color: white;
        text-align: center;

        font-size: 1.5em;
        height: 100px;
    }
</style>
<div class="container">
    <div class="row">
            <div class="big-box col-md-4 col-sm-6">image</div>
            <div class="col-md-8 col-sm-6"> WordA WordA WordA</div>
            <div class="col-md-8 col-sm-12">Links Links Links</div>
            <div class="col-md-8 col-sm-12">WordB WordB WordB</div>
    </div>
</div>

  2. 0 
    <div class="container">
    <div class="row">
        <div class="col-xs-6">
             Image
        </div>
        <div class="col-xs-6">
             <div class="row">
                WordA WordA WordA
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
             WordA WordA WordA
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
             Links Links Links
        </div>
   </div>
</div>

    Also note that:

    The Bootstrap grid system has four classes: xs (phones), sm (tablets),
    md (desktops), and lg (larger desktops). The classes can be combined
    to create more dynamic and flexible layouts.

    source: https://www.w3schools.com/Bootstrap/bootstrap_grid_examples.asp

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search