Before delving deeper into the issue, I'd like to outline some basic requirements for how I envision this being accomplished, if possible.
a) Due to modifying the Woocommerce template which utilizes Bootstrap 3, I am unable to simply switch to Bootstrap 4 even though it would greatly benefit me.
b) I am open to using any technique or custom code as long as it functions properly, even if it falls outside of the Bootstrap 3 framework's scope.
Here is the fiddle link: https://jsfiddle.net/wL1kjc0y/
I want to make the product list more dynamic by floating the product name, text, and button to the right side for odd items, while keeping the image on the left. Similarly, for even items, I want to float the image to the right and the text contents to the left.
I have used a div with 'col-lg-6' for text contents and another 'col-lg-6' for the image. However, applying the '.pull-right' class to the div wrapping Product contents does not work as intended. Since Bootstrap 3 doesn't utilize flexbox, I added the following code:
.d-flex {
display: flex !important;
}
To ensure proper vertical centering for text. Unfortunately, 'float: right;' does not work on flex elements. Hence, I'm unsure if my desired outcome is achievable. Deleting the '.d-flex' class definition allows me to use the '.pull-right' class, but then vertical text centering is lost.
You can view an example where the '.d-flex' class is removed and the '.pull-right' class is applied to the first item here: https://jsfiddle.net/7guxfa5o/1/
Ultimately, it seems I have two incomplete options: Have columns floated to the right but lose vertical centering, or maintain vertical centering without being able to float the columns.
The JavaScript portion can be disregarded, as it primarily detects Medium-sized browser window dimensions and applies formatting and styling rules accordingly.
I would greatly appreciate any alternative solutions or suggestions for other approaches to try.