Search code examples
javascriptresponsivescreen-size

Javascript responsiveness

I have an array of items that are sliced and spliced that display as two columns in separate div's.

What I want is for one column's items to hop on over to the other column as the screen size gets smaller so that it appears as one column on a small screen. I'm only finding things online related to jquery, but I'd like to use vanilla JS. How do I go about doing this? Any help is very much appreciated! 

let arr = [
  'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'
];

let hey = arr.slice(4);
let heyArray = arr.splice(0, 4);

document.getElementById('displayA').innerHTML = '<li><a href="#">' + hey.join('</a></li><li><a href="#">') + '</a></li>';

document.getElementById('displayB').innerHTML = '<li><a href="#">' + heyArray.join('</a></li><li><a href="#">') + '</a></li>';
div {
  float: right;
  margin-right: 1.2em;
  padding: 0 20px;
}
<div id="displayA"></div>
<div id="displayB"></div>

https://codepen.io/bfoley650/pen/zYrvPmo

Solution

  • I'm not really sure I understand but if it's responsiveness you want, then it's css's problem and not js.

    Here you have how to achieve that in css, added some width and background color to the elements so it's visually clearer.

    Basically, the idea is to have a flex-container that handles the direction those inner elements are rendered (row by default w/ flex-wrap) or set that container to column when the width of the screen is small enough.