Looking to create a layout with two divs side by side like the image below: Example
However, when the screen width increases, the layout changes to this:
Current
Here is the code:
Is there anyone skilled in this area who can guide me through it? Your assistance is greatly appreciated.
.Frank-row
{
border: 2px solid green;
}
.Frank-left
{
border: 2px dotted red;
}
.Frank-right
{
border: 2px dotted orange;
}<div class="container-fluid" >
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 Frank-row" >
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 Frank-left" >
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-offset-sm-6 col-md-offset-6 col-lg-offset-6 Frank-right" >
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
</div>
</div>