# Change order of Learn More and Action buttons (List layout)

**URL:** <https://community.elfsight.com/t/change-order-of-learn-more-and-action-buttons-list-layout/149351>\
**Category:** Timeline\
**Created:** [March 16, 2026, 9:11am UTC](https://community.elfsight.com/t/change-order-of-learn-more-and-action-buttons-list-layout/149351 "2026-03-16T09:11:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 16, 2026, 9:11am UTC](https://community.elfsight.com/t/change-order-of-learn-more-and-action-buttons-list-layout/149351/1 "2026-03-16T09:11:15Z")

</div>

Add this code to the Custom CSS field on the Settings tab of your [Timeline](https://elfsight.com/timeline-widget/) widget’s settings:

```auto
.es-event-card-buttons-wrapper {
  flex-flow: row-reverse;
  justify-content: start;
}

```

---

<div class="post-metadata">

**Author:** ![Taybraham](https://avatars.discourse-cdn.com/v4/letter/t/2bfe46/32.png) [@Taybraham](https://community.elfsight.com/u/Taybraham)\
**Post date:** [June 9, 2026, 1:24pm UTC](https://community.elfsight.com/t/change-order-of-learn-more-and-action-buttons-list-layout/149351/2 "2026-06-09T13:24:51Z")

</div>

I tried applying this CSS but instead of changing the order of the buttons (and keeping them “stacked”) it swaps the order but places them next to one another. How can I fix this? (screenshot below - the second button is barely showing to the right side of the section).

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/b/bbb9b7df0b1cf05619ec93e0bae66df7af7ae0f9.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 9, 2026, 1:49pm UTC](https://community.elfsight.com/t/change-order-of-learn-more-and-action-buttons-list-layout/149351/3 "2026-06-09T13:49:14Z")

</div>

Hi there, @Taybraham 👋

Apologies for the confusion! This CSS code works for the List layouts.

Since you’re using a **Carousel** layout, please try to use this code instead:

```auto
.es-event-card-buttons-wrapper {
  flex-flow: column-reverse;
  justify-content: start;
}

```