I am currently working on creating a responsive page layout using Bootstrap 4 and my aim is to adjust the alignment of two nested columns based on the size of the browser window.
Specifically, I am developing a pricing page that showcases a list of features below each of the three available options.
For larger screens (md, lg, xl), all three pricing plans are displayed in columns with features listed one after the other below each plan. However, for smaller screens (xs, xm), my goal is to divide the feature list into two columns and have them presented side by side.
I have been searching for solutions that cater to this particular scenario but have not yet come across anything suitable.
In order to tackle this issue, I am utilizing vanilla Bootstrap 4 within an HTML document, leveraging the built-in breakpoints. Despite my limited experience with flexbox, I have also attempted to use it alongside standard sizing classes, yet nothing seems to be effective thus far.
IMPORTANT: The aspect I am focusing on resolving pertains to the display of "feature 1," "feature 2," and so forth in the two columns. While the overarching plan columns are rendering correctly, the feature columns are not.
<!-- PRICING PLANS -->
<div class="bg-primary p-3 my-5">
<div class="container">
<div class="row">
<!-- Package 1 -->
<div class="col-md h-100 bg-white p-3">
<div class="d-flex flex-column">
<div class="mb-3 bg-success text-center">
<p>Package 1</p>
<p>$29.99</p>
</div>
<div class="bg-success">
<!-- THIS IS MY CURRENT (NON-WORKING) SOLUTION: -->
<div class="col-6 col-md-12">
<p>feature 1</p>
<p>feature 2</p>
<p>feature 3</p>
</div>
<div class="col-6 col-md-12">
<p>feature 4</p>
<p>feature 5</p>
<p>feature 6</p>
</div>
</div>
</div>
</div>
<!-- REMAINDER OF CODE FOR DISPLAY PURPOSES ONLY -->
<!-- Package 2 -->
<div class="col-md h-md-100 mx-md-4 my-md-0 my-4 bg-white p-3">
<div class="d-flex flex-column">
<div class="mb-3 bg-success text-center">
<p>Package 2</p>
<p>$19.99</p>
</div>
<div class="bg-success">
<p>features</p>
</div>
</div>
</div>
<!-- Package 3 -->
<div class="col-md h-md-100 bg-white p-3">
<div class="d-flex flex-column">
<div class="mb-3 bg-success text-center">
<p>Package 3</p>
<p>$9.99</p>
</div>
<div class="bg-success">
<p>features</p>
</div>
</div>
</div>
</div>
</div>
`
I initially assumed that setting the columns to have a col-xs-6 attribute would align them horizontally until reaching col-md-12, however, they continue to display the same regardless of window size.