Components arrangement in different viewports

There is nothing ootb to achieve what you are asking for, but I think you could potentially achieve that purely with CSS, you could overwrite your styles with Flexbox and the property order, you can learn more here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-order. If you go with this method is going to be easier to wrap all the components within a specific section and then work with that section.

The drawback is that you will be going to build a fixed layout which is kind of the opposite of what a CMS concept is all about. 

@mvelicheti 

I had implemented the same for one of my past requirement using jquery. Say like find the view port on page load and then in the body have a dummy div tags as shown below and in the function identify the view port and then invoke the respective component content in respective div element.I would not recommend adding the component multiple times and enabling and disabling the display by show and hide.This will have impact on SEO since the same component is loaded multiple times in same page in the location we need and even if you hide it still browser parse and loads the dom. So its better to inject the html at run time as shown below.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div  id="element1"></div>
<div  id="element2"></div>
<div id="element3"></div>
<div  id="element4"></div>
<button onclick="addText()">click to add text</button>

<script type="text/javascript">
function addText() {
if (port 1){
  $("#element1").append("inject the component content as static1");
 $("#element2").append("inject the component content as static2");
 $("#element3").append("inject the component content as static3");
 $("#element4").append("inject the component content as static4");
}
if(port 2){
 $("#element1").append("inject the component content as static2");
 $("#element2").append("inject the component content as static1");
 $("#element3").append("inject the component content as static3");
 $("#element4").append("inject the component content as static4");
}
</script>

 Regards

Hello @mvelicheti  - 

You may use use responsive grid layouts and the Layout Container component to achieve component reordering based on different viewports (desktop, iPad, mobile) in AEM.