TL:DR; - The Foundation framework does not have built-in support for this feature, however, after reviewing your question, I have come up with some possible solutions:
To control the presence of the large-3 columns
, you can check if a certain condition is met and echo the relevant HTML div tags using a scripting language like PHP or Python. For example:
if (some_condition === true) {
echo '<div class="large-3 columns">...</div>';
echo '<div class="large-9 columns">...</div>';
} else {
echo '<div class="large-12 columns">...</div>';
}
If you need to hide the div in specific screen resolutions, you can utilize the grid system's built-in functionality like so:
<div class="row">
<div class="large-3 show-for-large columns"><!-- ... --></div>
<div class="large-9 medium-12 columns"><!-- ... --></div>
</div>
Another option is to dynamically remove or add the div using jQuery's remove()
method:
$( ".large-3" ).remove();
I hope these suggestions are helpful. Please feel free to share any code snippets for further assistance.