JSFiddle - React, Tailwind, and code Playground

by kenyboy9

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="vc_row wpb_row vc_inner vc_row-fluid vc_custom_1486576323608">
<div class="visible-lg wpb_column vc_column_container vc_col-sm-2">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-4"><div class="vc_column-inner "><div class="wpb_wrapper">
	<div class="wpb_text_column wpb_content_element  vc_custom_1487093681035 pull-right pad-right-x">
		<div class="wpb_wrapper">
	
<h2 class="bebas" style="text-align: center;">Lorem Ipsum</h2>
<p class="font-black" style="text-align: center;">Lorem ipsum dolor sit amet,<br>
consectetur adipiscing elit. Suspendisse<br>
sem mi adipiscing elit. dolor sit amet,<br>
auctor in leo vel, vulputate</p>

		</div>
	</div>

	<div class="wpb_text_column wpb_content_element ">
		<div class="wpb_wrapper">
			<p><img class="img-responsive pull-right wp-image-337 alignright"  src="http://placehold.it/425x301"></p>

		</div>
	</div>
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-4"><div class="vc_column-inner "><div class="wpb_wrapper">
	<div class="wpb_text_column wpb_content_element  vc_custom_1487839889674 move-food-1">
		<div class="wpb_wrapper">
			<p><img class="img-responsive wp-image-336 alignleft" src="http://placehold.it/425x301"></p>

		</div>
	</div>

	<div class="wpb_text_column wpb_content_element  food-for-all-2 move-food-2">
		<div class="wpb_wrapper">
			<h2 class="bebas" style="text-align: center;">Lorem Ipsum</h2>
<hr class="break-sec">
<p class="font-black" style="text-align: center;">Lorem ipsum dolor sit amet,<br>
consectetur adipiscing elit. Suspendisse<br>
sem mi, auctor in leo vel,<br>
vulputateetur adipiscing elit.<br>
Suspendiss&nbsp;em mi, auctor in leo vel,<br>
vulputateetur adipiscing elit. Suspendiss</p>

		</div>
	</div>
</div></div></div><div class="visible-lg wpb_column vc_column_container vc_col-sm-2"><div class="vc_column-inner...

CSS

body{
  text-align: center !important;
  margin:0 auto;
}

.move-food-2{
  float:inherit;
  
}

@media only screen and (max-width: 480px) {
  
  .move-food-2{
  float:none;
}
 
}

JavaScript

$(document).ready(function() {
    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(checkSize);
});

//Function to the css rule
function checkSize(){
    if ($(".move-food-2").css("float") == "none" ){
       $(".move-food-1").insertAfter(".move-food-2");
    }
}