INFOSYS INFOSYS - 4 months ago 13
CSS Question

Re ordering Bootstrapped rows when changing screen orientation

Presently in a medium screen layout i have the following

=============================

| Parent | Child |



| data | data |



Now when the screen changes for mobile devices i want it like

===============

| Parent |



| data |



| Child |



| data |



How do i acheive such a thing?

Present CSS

<div class="row">
<div class="col-md-6">
<p class="myHeader">Parent</p>
</div>

<div class="col-md-6">
<p class="myHeader">Child</p>
</div>
</div>

<div class="row">

<div class="col-md-6">
value
</div>

<div class="col-md-6">
value
</div>
</div>

Answer Source

Wrap parent-value and child-value in col-md-6:

.myHeader {
  background-color: lightgreen;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                <p class="myHeader">Parent</p>
            </div>
            <div class="col-md-12">
                value
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                <p class="myHeader">Child</p>
            </div>
            <div class="col-md-12">
                value
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>