How can I change the order of buttons in PrimeReact OrderList control?

I am using PrimeReact OrderList component. You can review the component from the documentation. There are controls buttons here. They are used to move items up and down. I want the two buttons to be swapped as I marked in the picture.

The following code belongs to the PrimeReact OrderList component code. I am using this code.

import React, { useState, useEffect } from 'react';
import { OrderList } from 'primereact/orderlist';
import { ProductService } from './service/ProductService';

export default function BasicDemo() {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        ProductService.getProductsSmall().then((data) => setProducts(data));
    }, []);

    const itemTemplate = (item) => {
        return (
            <div className="flex flex-wrap p-2 align-items-center gap-3">
                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${item.image}`} alt={item.name} />
                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
                    <span className="font-bold">{item.name}</span>
                    <div className="flex align-items-center gap-2">
                        <i className="pi pi-tag text-sm"></i>
                        <span>{item.category}</span>
                    </div>
                </div>
                <span className="font-bold text-900">${item.price}</span>
            </div>
        );
    };
    
    return (
        <div className="card xl:flex xl:justify-content-center">
            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
        </div>
    )
}
        

I tried to do it with CSS but I didn't succeed. I can do reverse sorting operations or changing the position on the screen with expressions like display flex. But I can't change the position of the two buttons as shown in the picture. Can you help me?

I was able to do this function after a long time. I was able to change the positions of these buttons using flex and order operations in the css file. Below is the css code that provides this.

.p-orderlist-controls {
  display: flex !important;
}

.p-orderlist-controls button:nth-child(1) {
    order: 1  !important;
  }
.p-orderlist-controls button:nth-child(2) {
    order: 0  !important;
  }
  .p-orderlist-controls button:nth-child(3) {
    order: 2  !important;
  }
  .p-orderlist-controls button:nth-child(4) {
    order: 3  !important;
  }