How To Change Position Of Semantic Ui Sidebar For Different Screen Sizes?

I am using a Semantic UI sidebar — it's a standard setup:

Solution 1:

Mobile only and tablet only are actually just media queries that show/hide elements based on some predetermined screen width. You can do this on your own using jQuery.

$(window).resize(function () {
   if (window.innerWidth < 600) { //Some arbitrary mobile width
      $(".sidebar").addClass('top').removeClass('right');
   } else {
      $(".sidebar").removeClass('top').addClass('right');
   }
});

Share