In my design, I have a dynamic two-column layout created using Twitter Bootstrap 3.
The layout switches between image-text and text-image alignment for each row. The goal is to adjust it for smaller screens (less than 768px) so that rows with images on the right side display the image above the text in a single-column view.
Rows with the image on the right are identified by the even class.
Below is the HTML structure of an even row:
<div class="row">
<div class="col-sm-6 left evenleft">
text
</div> <!-- end col-sm-6 -->
<div class="col-sm-6 right evenright">
image
</div> <!-- end col-sm-6 -->
</div> <!-- end row -->
The jQuery code snippet below attempts to achieve this behavior:
function swap() {
$('.even').each(function () {
var left, right;
left = $(this).find('.evenleft').html();
right = $(this).find('.evenright').html();
if ($(window).width() < 768) {
$(this).find('.evenleft').html(right);
$(this).find('.evenright').html(left);
} else {
$(this).find('.evenleft').html(left);
$(this).find('.evenright').html(right);
}
});
}
$(function () {
swap();
});
$(window).resize(function () {
swap();
});
While the functionality works as expected initially, resizing the browser causes issues with the layout adjustment.
I am currently facing challenges in resolving this problem.