Currently utilizing Boostrap, I have set up 2 rows with 3 columns each.
Displaying the layout in the image below:
https://i.sstatic.net/Ye08T.jpg
The issue lies in the bottom row where the 3 columns are aligned in a single line. I aim for the 3 columns below to be closely connected to the 3 columns above (irrespective of their size), resembling a newspaper format.
Referencing the desired structure portrayed in the following image:
https://i.sstatic.net/VdDw8.jpg
Here's a snippet of my code (basic HTML and Angular ng-repeat implementation):
<div class="row">
<div ng-repeat="channel in channels">
<div ng-if="$index % 3 == 0" class="clearfix"></div>
<div class="col-md-4 well">
<h1 class="h1-class" style="margin-left: 20px">
{{ channel.name }}
</h1>
</div>
</div>
Your guidance on achieving this desired layout is much appreciated!
Please forgive any shortcomings in my question format, as I was unsure how to accurately phrase it. Warm greetings from Chile.