With a bootstrap row containing two columns on large screens (referred to as Text 2 and Image 2 below), the layout wraps on small screens, making Text 2 appear above and Image 2 below, which is the default behavior. However, if I wish to have Image 2 displayed above Text 2 on small screens only for this specific row, rather than my entire page, how can I achieve that? Essentially, I want this particular row to wrap in a right-to-left order instead of left-to-right.
Large Screen:
Image 1 Text 1
Text 2 Image 2
Image 3 Text 3
Small Screen:
Image 1
Text 1
**Text 2
Image 2**
Image 3
Text 3
Desired Small Screen:
Image 1
Text 1
**Image 2
Text 2**
Image 3
Text 3
What approach should I take to modify the wrapping direction of this specific bootstrap row?