---
title: Horizon Theme - Column Swiper
---

[![Horizon Logo](https://horizonthemedev.com/hs-fs/hubfs/raw_assets/public/horizon-theme/images/style-guide-images/logo-header.png?width=60&height=65&name=logo-header.png "Horizon Logo")](https://horizonthemedev.com/?hsLang=en)

- Components
  
  #### Components
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ornare sed consequat tempus sed adipiscing pellentesque ullamcorper .
  
  
  
  
  
    - [Style Guide](https://horizonthemedev.com/style-guide?hsLang=en)
    - [Header](https://horizonthemedev.com/header?hsLang=en)
    - [Footer](https://horizonthemedev.com/footer?hsLang=en)
    - [Featured Image](https://horizonthemedev.com/featured-image?hsLang=en)
    - [Shape Divider](https://horizonthemedev.com/shape-divider?hsLang=en)
    - [Fancy Headline](https://horizonthemedev.com/fancy-headline?hsLang=en)
    - [Accordion](https://horizonthemedev.com/accordion?hsLang=en)
    - [Creative Tabs](https://horizonthemedev.com/creative-tabs?hsLang=en)
    - [Timeline](https://horizonthemedev.com/timeline?hsLang=en)
    - [Blog Post Cards](https://horizonthemedev.com/blog-post-cards?hsLang=en)
    - [Testimonial Slider](https://horizonthemedev.com/testimonial-slider?hsLang=en)
    - [Pricing Cards](https://horizonthemedev.com/pricing-cards?hsLang=en)
  
  
    - [Image Gallery](https://horizonthemedev.com/image-gallery?hsLang=en)
    - [Image Text](https://horizonthemedev.com/image-text?hsLang=en)
    - [Image Slider](https://horizonthemedev.com/image-slider?hsLang=en)
    - [Content Tabs](https://horizonthemedev.com/content-tabs?hsLang=en)
    - [Background Overlay](https://horizonthemedev.com/background-overlay?hsLang=en)
    - [Featured Form](https://horizonthemedev.com/featured-form?hsLang=en)
    - [Flip Cards](https://horizonthemedev.com/flip-cards?hsLang=en)
    - Icon List
    - [Popup Modal](https://horizonthemedev.com/pop-up?hsLang=en)
    - Scroll Arrows
    - [Social Follow](https://horizonthemedev.com/social-follow?hsLang=en)
    - [Column Swiper](https://horizonthemedev.com/column-swiper)
  
  
    - [HubDB Listing](https://horizonthemedev.com/hubdb-listing?hsLang=en)
    - [Multistep Form](https://horizonthemedev.com/multistep-form?hsLang=en)
    - [Dynamic Tabs](https://horizonthemedev.com/dynamic-tab?hsLang=en)
    - [Team Members](https://horizonthemedev.com/team-members?hsLang=en)
    - [Button Group](https://horizonthemedev.com/button-group?hsLang=en)
    - [Event Calendar](https://horizonthemedev.com/event-calendar?hsLang=en)
- Interactive Landings 
    - [Scrolling Animations Landing 1](https://horizonthemedev.com/scrolling-animations-landing-1?hsLang=en)
    - [Scrolling Animations Landing 2](https://horizonthemedev.com/scrolling-animations-landing-2?hsLang=en)
- Blog
- Help

###### COMPONENTS

# COLUMN SWIPER

---

This module is your go-to solution for ensuring that your content is perfectly aligned, regardless of whether it’s viewed on a desktop, tablet, or mobile device. Ideal for those moments when you need to switch the order of text and images to suit different screen sizes, our module makes it a breeze. Embrace the ease of responsive design today!

[View Variants](https://horizonthemedev.com/column-swiper#section-2)

![Horizon BG](https://horizonthemedev.com/hubfs/horizon-bg.png "Horizon BG")

## **VARIANT: IMG + TEXT**

---

In this section, you'll initially notice a layout featuring an image beside a text block. However, as you adjust the resolution for tablet and mobile viewing, you'll observe a clever transformation: the text shifts to be displayed above the image, contrary to its position in the desktop view. This responsive design ensures optimal readability and visual appeal across various devices, adapting seamlessly to the changing screen sizes.

![image 1-1](https://horizonthemedev.com/hubfs/image%201-1.png "image 1-1")

## How to design a product that can grow itself 10x in year:

Something has always existed. According to physics, there can never be true physical nothingness—though there can be times when existence resembles nothing,

## **VARIANT: VIDEO + CONTENT**

---

In this section, we've ventured into a more intricate design. On the left, you'll find an engaging video, while the right side is an assembly of various atomic modules including text, an icon list, and a button. This setup showcases the ability to construct complex and visually compelling structures. Crucially, it also demonstrates our responsive design capabilities: for tablet and mobile views, the layout intuitively shifts, positioning the video below the other elements instead of at the top. This ensures a seamless and user-friendly experience across different screen sizes.

## How to design a product that can grow itself 10x in year:

Something has always existed. According to physics, there can never be true physical nothingness—though there can be times when existence resembles nothing,

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[Go to the top](https://horizonthemedev.com/column-swiper#section-1)

[![logo](https://horizonthemedev.com/hubfs/raw_assets/public/horizon-theme/images/logo-horizon-dark.svg "logo")](https://horizonthemedev.com/style-guide?hsLang=en)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Copyright © 2025 Horizon Theme . All Rights Reserved.

```json
{
  "@context" : "https://schema.org",
  "@type" : "VideoObject",
  "contentUrl" : "https://5915953.fs1.hubspotusercontent-na1.net/hubfs/5915953/-video-hero.mp4",
  "dateModified" : "2025-06-10T01:43:13.807Z",
  "duration" : "PT13S",
  "height" : 2160,
  "name" : "-video-hero",
  "thumbnailUrl" : "https://api-na1.hubapi.com/filemanager/api/v3/files/thumbnail-redirect/93408652173?portalId=5915953&size=medium",
  "uploadDate" : "2022-11-29T00:25:02.262Z",
  "width" : 3840
}
```