CODEWITHSUNDEEP
csstwitter-bootstraplayout
Stu
Stu

Reputation: 427

Bootstrap grid re-layout

Hi i'm trying to make rows with cols in them align a specific way on break points. Here is an image of how I want the break to work. enter image description here

The reason they all have to be in rows is for alignment. It is a conversation translated in two languages, Croatian on the left, English on the right. The rows have to top-align for ease of reading. The problem lies on mobile, where I would like the entire Croatian conversation first, then the English conversation after.

Here is the HTML so far

<div class="row">
    <div class="col-md-6">
        <h3>Croatian</h3>
    </div>
    <div class="col-md-6">
        <h3>English</h3>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <p class="dialogue"><strong>Anica</strong>: Putovanje je bilo zbilja ugodno. Proteklo je tako brzo.</p>
    </div>
    <div class="col-md-6">
        <p class="dialogue"><strong>Anica</strong>: The trip was really nice. It went so fast.</p>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <p class="dialogue"><strong>Zvonimir</strong>: A meni je putovanje trajalo predugo. Toliko sam se zaželio vidjeti Hrvatsku...</p>
    </div>
    <div class="col-md-6">
        <p class="dialogue"><strong>Zvonimir</strong>: For me the trip lasted too long. I wanted so much to see Croatia...</p>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <p class="dialogue"><strong>Višnja</strong>: Mama, ja sam tako žedna. Moram nešto popiti ...</p>
    </div>
    <div class="col-md-6">
        <p class="dialogue"><strong>Višnja</strong>: Mom, I am so thirsty! I have to drink something.</p>
    </div>
</div>

I know I could use tables or duplicate the content and show/hide based on screen size, but if there is a way I can manipulate the bootstrap grid to get the desired layout, that would be best.

Thanks for any help. S

Upvotes: 2

Views: 86

Answers (2)

GvM
GvM

Reputation: 1733

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-6">
    <h3>Croatian</h3>
    <div class="col-xs-12">
      <p class="dialogue"><strong>Anica</strong>: Putovanje je bilo zbilja ugodno. Proteklo je tako brzo.</p>
      <p class="dialogue"><strong>Anica</strong>: Putovanje je bilo zbilja ugodno. Proteklo je tako brzo.</p>
    </div>
  </div>
  <div class="col-xs-6">
    <h3>English</h3>
    <div class="col-xs-12">
      <p class="dialogue"><strong>Anica</strong>: The trip was really nice. It went so fast.</p>
      <p class="dialogue"><strong>Anica</strong>: The trip was really nice. It went so fast.</p>
    </div>
  </div>
</div>

Upvotes: 0

funkysoul
funkysoul

Reputation: 3241

Something like this? 

<div class="container">
<div class="row">
    <div class="col-md-6">
        <h3>Croatian</h3>            
    </div>
    <div class="col-md-6">
        <h3>English</h3>            
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="col-xs-12">Croatian 1</div>
        <div class="col-xs-12">Croatian 2</div>
        <div class="col-xs-12">Croatian 3</div>
    </div>
    <div class="col-md-6">
        <div class="col-xs-12">English 1</div>
        <div class="col-xs-12">English 2</div>
        <div class="col-xs-12">English 3</div>
    </div>
</div>

Upvotes: 1

Related Questions