Bootstrap column ordering

[Andrei_Birsan]

Hello. In Bootstrap I am trying to reorder columns based on the screen size.
On small devices I have the order as in the below screenshot, but from medium to large screen sizes I need to reorder columns as it follows: Text column to take a width of 12 and stay at the top of the row, followed by the Image column which should take a width of col-6 along with the Other column which should sit next to the Image also taking half of the width.
From what I understand I can use the Bootstrap push, pull to reorder columns but I’m struggling to create the above explained layout on medium to large screens. Would appreciate some help.

<div class="row">
	    <div class="col-md-6">
	        <div class="alert alert-danger">Image</div>
	    </div>
	    <div class="col-md-4">
	        <div class="alert alert-info">Text</div>
	    </div>
	    <div class="col-md-4">
	        <div class="alert alert-info">Other</div>
	    </div>
</div>

[PaulOB]

You would need bootsrap4 to do this and then use the order property on the flex items as required.

Bootstrap3 can only reorder the columns that are on the same row (eg a float left and float right) but you cannot move a column to the top row unless its already there in the html. (There are hacks for fixed height items but not for fluid text.)

If you are stuck with bootstrap3 then ignore the grid for this item and write your own rules using flexbox.