Generate structure in flexbox bootstrap

Navigation
0

.columns-equal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
height:800px

}

.col-bordered {
    display: flex;
    flex-flow: column nowrap;
    flex: 0 1 50%;
}

.col-bordered div {
    flex: 1;
}

.row-acc-1 {
    background-color: green
}

.row-acc-2 {
    background-color: red
}

.col-bordered {
    border: 2px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<section>
  <div class="container-fluid">
    <div class="row columns-equal">
      <div class="col-xs-12 col-md-6 col-bordered">
        <div class="row row-acc-1">
            <div class="embed-responsive embed-responsive-16by9">
              <figure>
                <iframe src="https://player.vimeo.com/video/238615749" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="width: 100%;"></iframe>
              </figure>
            </div>
        </div>
        <div class="row row-acc-2">
<img class="img-responsive" src="http://qkstudiodemo.com/radiocantilo/html/images/picurba-banner.jpg" alt="">
        </div>
        <div class="row row-acc-2" style="background-color: blue">
          <a>Test 2</a>
        </div>
      </div>        
      <div class="col-xs-12 col-md-6 col-bordered">
        <span>
          Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </span>
      </div>

    </div>
  </div>      
</section>
  
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Hi, how would this structure generate in bootstrap with flexbox and at the same time be responsive?

    
asked by MarianoF 14.12.2017 в 21:23
source

1 answer

0

I would remove the display: flex from the left column since you really do not need it, with this you will achieve that both the direct father of the image and the video adapt in height to the size of your children: 

.columns-equal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.columns-equal .row img{
  width: 100%;
}

.row-acc-1 {
  background-color: green
height:400px
}

.row-acc-2 {
  background-color: red
}

.col-bordered {
  border: 2px solid black
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<section>
  <div class="container-fluid">
    <div class="row columns-equal">
      <div class="col-xs-12 col-md-6 col-bordered">
        <div class="row row-acc-1">
            <div class="embed-responsive embed-responsive-16by9">
              <figure>
                <iframe src="https://player.vimeo.com/video/238615749" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="width: 100%;"></iframe>
              </figure>
            </div>
        </div>
        <div class="row row-acc-2">
          <img class="img-responsive" src="http://qkstudiodemo.com/radiocantilo/html/images/picurba-banner.jpg" alt="">
        </div>
        <div class="row row-acc-2" style="background-color: blue">
          <a>Test 2</a>
        </div>
      </div>        
      <div class="col-xs-12 col-md-6 col-bordered">
        <span>
          Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </span>
      </div>
    </div>
  </div>      
</section>
    
answered by 15.12.2017 в 14:43
cardinality doubts in database Delete v1 in endpoint url